<template>
  <el-dialog
    title="添加权限"
    :visible.sync="showDialog"
    :append-to-body="true"
    :close-on-click-modal="false"
    top="50px !important"
    width="80%"
  >
    <div>
      <el-form
        ref="listFilterRef"
        :model="list.filter"
        inline
        size="mini"
        class="list-filter"
      >
        <el-form-item prop="hotelName">
          <el-input
            v-model="list.filter.hotelName"
            placeholder="酒店名称"
            clearable
          />
        </el-form-item>
        <el-form-item prop="areaCode">
          <RegionSelect
            v-model="list.filter.areaCode"
            :props="{
              checkStrictly: true
            }"
            size="mini"
          />
        </el-form-item>
        <el-form-item prop="hotelLevel">
          <KiSelect
            v-model="list.filter.hotelLevel"
            :options="zy_hotel_star"
            placeholder="酒店星级"
          />
        </el-form-item>
        <el-form-item prop="status">
          <KiSelect
            :index.sync="list.filter.status"
            :options="['停用', '启用']"
            placeholder="状态"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="20">
        <el-col :span="16">
          <div class="table-operation">
            <div></div>
            <el-pagination
              v-bind="elPaginationProps"
              :total="list.total"
              :currentPage.sync="list.filter.pageNo"
              :pageSize.sync="list.filter.pageSize"
            />
          </div>
          <el-table
            @selection-change="handleSelectionChange"
            v-loading="list.loading"
            :data="list.data"
            size="mini"
            ref="tableList"
          >
            <el-table-column label="酒店名称" prop="hotelName" />
            <el-table-column label="酒店星级">
              <template slot-scope="{ row }">
                {{ row.hotelLevel | $value2label(zy_hotel_star) }}
              </template>
            </el-table-column>
            <el-table-column label="所属地区" prop="areaName" />
            <el-table-column label="酒店电话" prop="telephone" />
            <!-- <el-table-column label="审核状态" align="center">
              <template slot-scope="{ row }">
                {{ row.auditStatus | auditStatus }}
              </template>
            </el-table-column> -->
            <el-table-column label="状态" align="center">
              <template slot-scope="{ row }">
                <el-tag v-if="row.status == 1" type="success">启用</el-tag>
                <el-tag v-if="row.status == 0" type="danger">停用</el-tag>
              </template>
            </el-table-column>
            <el-table-column type="selection" width="55"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="8">
          <div class="selected">
            <h5>已选择</h5>
            <el-scrollbar v-if="selected.length > 0">
              <div
                v-for="(item, index) in selected"
                :key="index"
                class="el-cascader-node selected-item"
              >
                <span class="el-cascader-node__label">
                  {{ item.hotelName }}
                  <i
                    @click="toggleRowSelection(item, false)"
                    class="el-icon-close"
                  />
                </span>
              </div>
            </el-scrollbar>
            <p v-else class="tips">
              <i class="el-icon-s-order"></i>
              请选择左侧数据
            </p>
          </div>
        </el-col>
      </el-row>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="showDialog = false">取 消</el-button>
      <el-button type="primary" @click="submitFormFun()" :loading="loadingBtn">
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import addMixins from './mixins/add-mixins'

export default {
  name: 'add-hotel',
  mixins: [pageMixin, addMixins],
  props: ['zy_hotel_star'],
  filters: {
    auditStatus (code) {
      const status = { 1: '待审核', 2: '审核未通过', 3: '审核通过' }
      return status[code] || ''
    }
  },
  setup: props =>
    useAdmateAdapter({
      urlPrefix: 'sot-admin-api/sys/department',
      axiosConfig: {
        getList: {
          url: 'hotelDataList'
        }
      },
      list: {
        filter: {
          departmentId: props.rowData.departmentId
        }
      }
    }),
  data () {
    return {
      dataType: 4,
      idKey: 'hotelId',
      nullTip:
        '未选择需要添加数据权限的酒店。必须勾选添加项才可以提交，否则只能取消。'
    }
  }
}
</script>
<style lang="scss" scoped>
.selected {
  width: 100%;
  height: 100%;
  margin-left: 10px;
  float: left;
  h5 {
    font-size: 14px;
    margin: 0;
    height: 36px;
    line-height: 36px;
    padding-left: 10px;
    background: #efefef;
  }
  .el-scrollbar {
    height: 550px;
  }
  :deep(.el-scrollbar__wrap) {
    overflow-x: auto;
  }
  .el-cascader-node {
    padding: 0;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid rgb(241, 241, 241);

    .el-icon-close {
      float: right;
      margin-right: 20px;
      line-height: 40px;
    }
  }

  .tips {
    text-align: center;
    color: #ccc;
    padding-top: 100px;
    i {
      display: block;
      font-size: 60px;
    }
  }
}
</style>
